Vue组件强制刷新（重新渲染）的四种方案对比

2023-12-23 20:04| 来源: 网络整理| 查看: 265

文章目录前言一、刷新整个页面二、使用v-if标记三、forceUpdate四、key-changing五、应用场景vue具有缓存的页面的强制刷新进入页面输入框自动聚焦

前言

Vue的双向绑定属于自动档；在特定的情况下，需要手动触发“刷新”操作，目前有四种方案可以选择：

刷新整个页面（最low的，可以借助route机制）使用v-if标记（比较low的）使用内置的forceUpdate方法（较好的）使用key-changing优化组件（最好的）一、刷新整个页面 router.go(0) 二、使用v-if标记

如果是刷新某个子组件，则可以通过v-if指令实现。我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的。

刷新comp组件 import comp from '@/views/comp.vue' export default { name: 'parentComp', data() { return { refresh: true } }, methods: { refreshComp() { // 移除组件 this.refresh = false // 在组件移除后，重新渲染组件 // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。 this.$nextTick(() => { this.refresh = true }) } } } 三、forceUpdate

组件内置$forceUpdate方法，使用前需要在配置中启用。

import Vue from 'vue' Vue.forceUpdate() Refresh当前组件 export default { methods: { handleUpdateClick() { // built-in this.$forceUpdate() } } } 四、key-changing

原理很简单，vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。

export default { data() { return { key: 0 } }, methods: { handleUpdateClick() { this.key += 1 // 或者 this.key = new Date(); } } } 五、应用场景 vue具有缓存的页面的强制刷新

有些列表页面需要进入详情返回时有缓存功能，但是每次进入列表页面又需要刷新列表，这种时候就需要手动刷新页面

goPath是vue跳转的一个封装

main.js /** * 根据前端路由跳转到webview * @param config * @param type inPage: 利用h5路由跳转 */ Vue.prototype.goPath = function (routerConfig, type = 'web') { const config = routerConfig; // 统一添加参数 if (this.$route.query.isSelfManage === '1') { config.query.isSelfManage = 1; } console.log(config); if (window.__wxjs_environment === 'miniprogram') { if (window.wx) { const params = this.$router.resolve(config).href; // 添加参数，兼容跳转问题 const toUrl = `${location.protocol}//${location.host}${location.pathname}${location.search}${params}`; if (type === 'web') { window.wx.miniProgram.navigateTo({ url: `/pages/webview/index?url=${encodeURIComponent(toUrl)}`, }); } else if (type === 'inPage') { this.$router.push(config); if (!config.replace) { this.$router.push(config); } else { this.$router.replace(config); } } else { window.wx.miniProgram.navigateTo(config); } } } else { if (!config.replace) { this.$router.push(config); } else { this.$router.replace(config); } } }; 进入页面输入框自动聚焦

一般情况下，加上以下代码就可以聚焦

export default { data() { return { inputInfo: { // 输入框对象 num: 0, // 字数 msg: '' // 内容 }, } }, watch: { [`options.msg`] () { let length = utils.fancyCount2(this.inputInfo.msg); this.$set(this.inputInfo, 'num', length); } }, directives: { focus: { // 指令的定义 inserted: function(el) { el.focus(); } } }, methods: { /** * input元素失去焦点时触发 */ resizeView () { document.body.scrollIntoView(true); }, } }

但是在有缓存的页面，一般就只有第一次会聚焦，后面进入都不会聚焦，办法就是用第四种强制刷新输入框来聚焦

Refresh当前组件 export default { data() { return { inputInfo: { // 输入框对象 num: 0, // 字数 msg: '', // 内容 focus: '', }, } }, activated () { this.inputInfo.focus = new Date().getTime(); }, methods: { handleUpdateClick() { // built-in this.inputInfo.focus = new Date().getTime(); } }

【本文地址】

公司简介

联系我们